<template>
  <div>
    <div class="list-item">
      <div class="first-td" style="cursor: pointer;" :style="{'width': isMg? '50%': '60%'}" @click="$emit('openArticle')">
        <p class="title">
          <img v-if="isHot && articleDesc.articleReviewCount >= 10" src="../../assets/img/hot.png" alt="" style="width: 14px;position:relative;top: -2px;">
          <img v-if="isHot && articleDesc.articleReviewCount >= 10" src="../../assets/img/hot.png" alt="" style="width: 14px;position:relative;top: -2px;">
          <img v-if="isHot && articleDesc.articleReviewCount >= 10" src="../../assets/img/hot.png" alt="" style="width: 14px;position:relative;top: -2px;">
          {{articleDesc.articleTitle || articleDesc.contextTitle}}&nbsp;
        </p>
        <p class="desc">{{articleDesc.articleInfo || articleDesc.contextInfo}}</p>
        <p class="module">
          <span v-if="articleDesc.plateId === '0'" style="color:red;position:relative;top:2px;left:2px;"><svg aria-hidden="true" style="font-size:14px;" class="site-sidebar__menu-icon icon-svg icon-svg__annouce"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-annouce"></use></svg></span>
          <span v-if="articleDesc.plateId === '1'" style="color:#0286e2;position:relative;top:2px;left:2px;"><svg aria-hidden="true" style="font-size:14px;" class="site-sidebar__menu-icon icon-svg icon-svg__library"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-library"></use></svg></span>
          <span v-if="articleDesc.plateId === '2'" style="color:#00b853;position:relative;top:2px;left:2px;"><svg aria-hidden="true" style="font-size:14px;" class="site-sidebar__menu-icon icon-svg icon-svg__discussion"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-discussion"></use></svg></span>
          <span v-if="articleDesc.plateId === '3'" style="color:#ebb563;position:relative;top:2px;left:2px;"><svg aria-hidden="true" style="font-size:14px;" class="site-sidebar__menu-icon icon-svg icon-svg__tixing"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-tixing"></use></svg></span>
          {{articleDesc.plateName}}>{{articleDesc.firstSectionName}}{{articleDesc.secondSectionId? '>'+articleDesc.secondSectionName: ''}}
        </p>
      </div>
      <div v-if="!showOperator" style="width: 10%;min-width: 100px;">
        {{articleDesc.articleMasterName || articleDesc.contextMasterName}}&nbsp;
      </div>
      <div style="width: 15%;min-width: 150px;">
        {{articleDesc.articleModifytime || articleDesc.createTime}}&nbsp;
      </div>
      <div v-if="showOperator" style="width: 15%;min-width: 150px;">
        {{articleDesc.articleModifytime}}&nbsp;
      </div>
      <div v-if="!showOperator && !isCollection" style="width: 15%;min-width: 100px;">
        <div class="action-btn">
          <img v-if="articleDesc.collectionStatus === '0'" @click="likeCollect('1','1')" src="../../assets/img/collection.png">
          <img v-if="articleDesc.collectionStatus === '1'" @click="likeCollect('1','0')" src="../../assets/img/collection2.png">
          <img v-if="articleDesc.likeStatus === '0'" @click="likeCollect('0','1')" src="../../assets/img/like.png">
          <img v-if="articleDesc.likeStatus === '1'" @click="likeCollect('0','0')" src="../../assets/img/like2.png">
          <img @click="$emit('share', articleDesc.id, articleDesc.articleTitle)" src="../../assets/img/share.png">
        </div>
      </div>
      <div v-if="showOperator" style="width: 10%;min-width: 100px;">
        <span v-if="articleDesc.articleStatus === '1' || articleDesc.articleStatus === '0'" @click="$emit('editArticle', articleDesc.id)" class="action-btn">编辑</span>
        <span v-if="articleDesc.articleStatus === '1' || articleDesc.articleStatus === '0'" @click="$emit('delArticle', articleDesc.id)" class="action-btn">删除</span>
        <span v-if="articleDesc.articleStatus === '2'" @click="$emit('rebackArticle', articleDesc.id)" class="action-btn">恢复</span>
        <span v-if="articleDesc.articleStatus === '2'" @click="$emit('managerDel', articleDesc.id)" class="action-btn">彻底删除</span>
      </div>
      <div v-if="isMg" style="width: 10%;min-width: 50px;">
        <span v-if="articleDesc.articleStatus === '1'" @click="$emit('editArticle', articleDesc.id)" class="action-btn">编辑</span>
        <span v-if="articleDesc.articleStatus === '1'" @click="$emit('managerDel', articleDesc.id)" class="action-btn">删除</span>
      </div>
      <div v-if="isCollection" style="width: 15%;min-width: 100px;">
        <span @click="$emit('cancelCollect', articleDesc.contextId)" class="action-btn">取消收藏</span>
      </div>
    </div>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import formUtil from '@/utils/formUtil'

  export default {
    data () {
      return {
      }
    },
    mixins: [dingMixin],
    props: ['articleDesc', 'isMg', 'showOperator', 'isCollection', 'isHot'],
    methods: {
      async likeCollect(type, status){
        if(!await this.$httpN.postB('community/likecollection/like', {
          userId: this.userInfo.dingId,
          contextId: this.articleDesc.id,
          contextTitle: this.articleDesc.articleTitle,
          dataType: type,
          status: status
        })) return

        formUtil.submitSuccess((status === '0'? '取消': '') + (type === '0'? '点赞': '收藏') + '成功');

        if(type === '0') {
          this.articleDesc.likeStatus = status;
        }else if(type === '1') {
          this.articleDesc.collectionStatus = status;
        }
      }
    },
    mounted() {
      
    }
  }
</script>
<style lang="scss" scoped>
    .list-item{
      height: 100px;
      padding: 0 20px;
      font-size: 0;
      display:flex;
      min-width: 700px;
      border-bottom: 1px solid #e8e8e8;
      p{
        margin: 0;
      }
      &:hover{
        background: #fafafa;
      }
      div{
        font-size: 14px;
        float:left;
        color:#595959;
        font-weight: 400;
        line-height: 100px;
      }
      .first-td{
        line-height: 16px;
        padding: 12px 0;
        padding-right: 50px;
        .title{
          font-weight: bold;
          overflow:hidden;
          height: 16px;
        }
        .desc{
          height: 32px;
          margin: 5px 0;
          font-size:12px;
          word-break: break-all;
          overflow: hidden;
        }
        .module{
          font-size: 12px;
        }
      }
    }
    .action-btn{
      color:#66b1ff;
      cursor:pointer;
    }
    .action-btn{
      img{
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
    .icon-svg {
      width: 1em;
      height: 1em;
      fill: currentColor;
    }
</style>